<script setup>
import ModalBox from '@/components/ModalBox/ModalBox.vue'
import { message } from 'ant-design-vue';
import { reactive, ref, toRaw, inject, watch, onMounted } from 'vue';
import { Form } from 'ant-design-vue';
import { roleAdd } from "@/apis/systemManaging/role"
import { menuList } from "@/apis/systemManaging/menu"
const useForm = Form.useForm;
const open = ref(false);
const formRef = ref(null);
const treeData = ref(null);
const titleflag=ref(true);
const RoleTypeOptionsEnum = [
    {
        label: "后台",
        value: "admin",

    },
    {
        label: "OA",
        value: "oa",
    },
    {
        label: "CRM",
        value: "crm",

    },
]
const formState = reactive({
    roleName: "",
    roleCode: "",
    description: "",
    menuIds:[],
    id: "",
});
const roleList = inject("getList")
const value = ref([]);
const { resetFields, validate, validateInfos } = useForm(
    formState,
    reactive({
        roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur', }],
        roleCode: [{ required: true, message: '请输入角色字符', trigger: 'blur', }],
    }),
);
watch(() => open.value, () => {
    if(!open.value){
        formState.roleName="";
        formState.roleCode="";
        formState.description="";
        formState.menuIds=[];
        formState.id="";
    }
})
watch(() => formState.menuIds, () => {
    console.log('formState.menuIds', formState.menuIds);
});
onMounted(() => {
    getMenuList();
})
const getMenuList = async () => {
    let res = await menuList();
    if (res.code === 200) {
        console.log(res);
        treeData.value = res.data
    }
}
const onSubmit = () => {
    formRef.value
        .validate()
        .then(() => {
            craeteEdit()
        })
        .catch(error => {
            console.log('error', error);
        });
};
const handleOk = (options) => {
    validate()
        .then(res => {
            open.value = false;
            RoleOperate();
        })
        .catch(err => {
            console.log('error', err);
        });
}
const handleCancel = () => {
    open.value = false
}
const RoleOperate = async () => {
    let res = await roleAdd(formState);
    if (res.code === 200) {
        roleList();
    }
}
defineExpose({ open, formState,titleflag})

</script>
<template>
    <modal-box :title="titleflag?'新增角色':'编辑角色'" :isOpen="open" @ok="handleOk" @cancel="handleCancel" width="500px">
        <template #content>
            <div>
                <a-form ref="formRef" :model="formState" @finish="handleOk">
                    <a-form-item label="角色名称" v-bind="validateInfos.roleName">
                        <a-input v-model:value="formState.roleName" placeholder="请输入角色名称" />
                    </a-form-item>
                    <a-form-item label="角色字符" v-bind="validateInfos.roleCode">
                        <a-input v-model:value="formState.roleCode" placeholder="请输入角色字符" />
                    </a-form-item>
                    <a-form-item label="菜单权限" v-bind="validateInfos.is_admin">
                        <div class="tree-wrapper">
                            <a-tree v-if="treeData"  v-model:checkedKeys ="formState.menuIds " checkable :tree-data="treeData" 
                            :field-names="{ label:'name',key:'id',value:'id',children: 'children'}">
                                <template #title="{ name}">{{ name }}</template>
                            </a-tree>
                        </div>
                    </a-form-item>
                    <a-form-item ref="name" label="角色描述">
                        <a-textarea v-model:value="formState.description" placeholder="请填写角色描述" :rows="4" />
                    </a-form-item>
                    <a-form-item v-if="formState.is_admin === 0" label="角色所属类型" v-bind="validateInfos.type">
                        <a-select v-model:value="formState.type" :allowClear="true">
                            <a-select-option v-for="item in RoleTypeOptionsEnum" :value="item.value">{{ item.label
                            }}</a-select-option>
                        </a-select>
                    </a-form-item>
                </a-form>
            </div>
        </template>
    </modal-box>
</template>
<style lang='scss' scoped>
.description {
    width: 100% !important;
    margin-right: 0px !important;
}

.tree-wrapper {
    border:1px solid #d9d9d9;
    padding: 10px;
}

:deep(.ant-form) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

:deep(.ant-form-item) {
    width: 100%;
    margin-right: 10px;

    // &:nth-child(2n) {
    //     margin-right: 0;
    // }
}


:deep(.ant-form-item-label) {
    width: 110px;
}
</style>